<template>
  <!--面包屑 -->
  <el-breadcrumb separator="/" class="breadcrumb">
    <el-breadcrumb-item :to="{ path: '/' }">{{ $store.state.isChinese? '首页': 'главная'}}</el-breadcrumb-item>
    <el-breadcrumb-item @click="handleClassicCaseClick">{{ $store.state.isChinese ? '新闻公共' : 'Новостное объявление' }}</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="news" @scroll="handleScroll1">
    <div class="tupian">
      <el-card v-for="news in Newslist.records" class="news-card" :key="news.id" @click="newsxq(news.id)"
               v-if="news.id !==null  && news.id !== ''">
        <div class="image-container">
          <img
              :src="news.imgUrl.startsWith('htt') ? news.imgUrl : `${$NuoYiUrl}${news.imgUrl}`"
          />
        </div>
        <template #footer>{{ $store.state.isChinese ? news.titleCn : news.titleRa }}</template>
      </el-card>
    </div>

    <!--分页组件  -->
    <!--  <div class="demo-pagination-block" >
        <el-pagination
            v-if="total>0"
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :size="ANLilist.size"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>-->
    <div v-if="loading" class="loading-spinner">加载中...</div>
  </div>
</template>

<script>
import EventBus from "@/eventBus";

export default {
  name: "new",
  data() {
    return {
      pageNo: 1, // 当前页码
      pageSize: 10,   // 每页显示的条目数
      // size: 'small',   // 分页组件的大小
      // disabled: false, // 是否禁用
      // background: true, // 背景
      Newslist: {total: 0, records: [],}, // 对象
      total: 0, // 总条数
      loading: false, // 加载状态
      isChinese: true,// 默认语言
      items: [] // 存储数据的数组
    }
  },

  beforeRouteLeave(to, from, next) {
    next();
  },
  mounted() {
    // 监听语言变化事件
    EventBus.on('languageChanged', (newIsChinese) => {
      this.isChinese = newIsChinese;
    });
    console.log(this.isChinese);
    this.news()
    /*滚动分页*/
    window.addEventListener('scroll', this.handleScroll1);

    // // 恢复滚动位置
    // const savedPosition1 = sessionStorage.getItem('scrollPosition1');
    // console.log('恢复滚动位置savedPosition1', savedPosition1);
    // if (savedPosition1) {
    //   window.scrollTo(0, parseInt(savedPosition1)); // 恢复滚动位置
    // }
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener('scroll', this.handleScroll1);
  },
  methods: {
    async news() {
      if (this.loading) return; // 防止重复请求
      this.loading = true;
      const {data: res} = await this.$http.get('/news/listNewsPage?pageNo=' + this.pageNo + '&pageSize=' + this.pageSize)
      console.log("新闻列表数据 :", res.newsIPage)
      if (res.code === 200) {
        // 合并新获取的数据
        this.Newslist.records = this.Newslist.records.concat(res.newsIPage.records);
        this.total = parseInt(res.newsIPage.total);
        this.pageNo++;   // 页码加1
      }
      this.loading = false;
    },
    // 详情页
    newsxq(id) {
      this.$router.push({path: '/newsxq', query: {id: id}});
      console.log("新闻详情页id :", id)
    },
    /*滚动分页*/
    handleScroll1() {
      if (!this.Newslist || !this.Newslist.records) return; // 确保 Newslist 正确初始化
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      if (scrollTop + windowHeight >= documentHeight - 100) { // 到达底部
        if (this.Newslist.records.length < this.total) {
          this.news(); // 加载更多内容
        }
      }
    }
  },
}

</script>

<style scoped>
.breadcrumb {
  position: fixed; /* 固定在视口 */
  top: 87.5px; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  background: white; /* 背景色 */
  z-index: 10; /* 确保在其他内容之上 */
  padding: 20px; /* 添加内边距 */
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
  padding: 5px;
  width: 100%;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
  width: 100%;
}

.news {
  padding-top: 70px; /* 根据面包屑的高度添加相应的内边距 */
  width: 100%;
  height: 100%;
  overflow: auto; /* 添加滚动条 */
}

.tupian {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 允许换行 */
  margin-bottom: 10px;
}

.news-card {
  width: 48%; /* 设置为48%以避免换行时的间距问题 */
  margin-bottom: 10px; /* 控制每个卡片之间的间距 */
}

.image-container {
  display: flex; /* 使外层容器是flexbox */
  align-items: center; /* 垂直居中图片 */
  justify-content: center; /* 水平居中图片 */
  height: 100px; /* 设置固定高度 */
  width: 100%; /* 填满父容器的宽度 */
}

.news-card img {
  height: 100px !important;
  width: 100%; /* 或设置为具体值，例如 100% */
  object-fit: fill; /* 填充整个img元素，可能剪裁cover */
}

.loading-spinner {
  text-align: center;
  margin: 20px 0;
}

</style>